<template>
  <div class="app-container">
    <div class="hor mg-b-10">
      <div class="hor mg-b-10 ver-center flex1">
          <el-cascader
            v-model="filterCompany"
            placeholder="请选择省市"
            :options="areaData"
            @change="onCompanyFilterChange"
            :props="{ expandTrigger: 'hover',label:'label',value:'value',checkStrictly:true}"
            filterable show-all-levels
            clearable></el-cascader>
          <div class="hor pd-l-10">
            <el-input class="" v-model="supplyCompanyName" placeholder="请输入供应商名" clearable></el-input>
          </div>
          <div class="pd-l-10"></div>
          <el-button type="primary" icon="el-icon-search" @click="onClickSearch()" class="">筛选
          </el-button>
      </div>

      <div class="">
        <el-button type="primary" icon="el-icon-plus" size="mini" class="mg-l-10" v-has-permission="['供应商管理编辑、新增、删除']"
                   @click="onClickAdd()">增加
        </el-button>
      </div>

    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="allList"
      element-loading-text="Loading"
      @cell-click="onCellClick"
      @selection-change="handleSelectionChange"
      @row-click="onItemClick"
      @row-dblclick="onItemDoubleClick"
      :max-height="autoHeight"
      border
      fit
      highlight-current-row
    >

      <el-table-column label="地区" align="center" width="300">
        <template slot-scope="scope">
          {{ scope.row.province!=null?scope.row.province:"" }}/ {{ scope.row.city!=null?scope.row.city:"" }}
        </template>
      </el-table-column>
      <el-table-column label="单位名称" align="center" width="300">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="300" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime}}
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="操作" align="center" >
        <template slot-scope="scope">

          <el-button type="info" class="pd-lr10" size="mini" v-has-permission="['供应商管理编辑、新增、删除']"
                     @click.stop="onClickView(scope.row)">修改
          </el-button>
          <el-button type="danger" size="mini" :loading="onDeleteLoading" v-has-permission="['供应商管理编辑、新增、删除']"
                     @click.stop="onDeleteId=scope.row.id; onDeleteShow = true ">删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <div class="hor">
      <div class="flex1"></div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="mg-t-10">
      </el-pagination>
    </div>
    <el-dialog
      title="信息"
      :visible.sync="infoDialogShow"
      :close-on-click-modal=false
      width="700px"
      @open="onDialogOpen"
      center>
      <div class="ver match-width">
        <div class="ver" style="width: 600px;">
          <div class="hor ver-center ver-center mg-t-20">
            <div style="width: 100px;" class="font14 font-text-color-main-title">单位名称</div>
            <el-input class="flex1 font-text-color-main-title" style="width: 50px" maxlength="128"
                      v-model="detail.name">
            </el-input>
          </div>
          <div class="hor ver-center ver-center mg-t-20">
            <div class="hor ver-center flex1">
              <div style="width: 100px;" class="font14 font-text-color-main-title">省市</div>
              <el-cascader
                class="flex1"
                v-model="tempcity"
                placeholder="请选择省市"
                :options="areaData"
                @change="onRegionChange"
                :props="{ expandTrigger: 'hover',label:'label',value:'value',checkStrictly:false}"
                filterable show-all-levels
                clearable></el-cascader>
            </div>
          </div>
          <div class="hor ver-center ver-center mg-t-20">
            <div class="hor ver-center flex1">
              <div style="width: 100px;" class="font14 font-text-color-main-title">备注
              </div>
              <el-input class="flex1 font-text-color-main-title"  type="textarea" maxlength="512"
                        :autosize="{minRows: 3, }"
                        v-model="detail.remarks" placeholder="请输入"/>
            </div>
          </div>

        </div>

        <div class="hor match-width ver-center hor-center mg-t-20">
          <el-button @click="infoDialogShow = false">取 消</el-button>
          <el-button type="primary" slot="reference" :loading="onSaveLoading" class="mg-l-10"
                     @click="onClickSave">保存
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="onDeleteDialogShow"
      :close-on-click-modal=false
      width="30%">
      <span>删除后无法恢复</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onDeleteDialogShow = false">取消</el-button>
        <el-button type="danger" @click="batchDelete()" :loading="onDeleteLoading">删除</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="onDeleteShow"
      :close-on-click-modal=false
      width="30%">
      <span>删除后无法恢复</span>
      <span slot="footer" class="dialog-footer">
                    <el-button @click="onDeleteShow = false">取消</el-button>
                    <el-button type="danger" @click="deleteById"
                               :loading="onDeleteLoading">删除</el-button>
                  </span>
    </el-dialog>




  </div>

</template>
<style>
</style>
<script>
const request = require('@/api/project/supplyCompany')
import {getCityData} from '@/js/cityData.js'

let _this;
export default {
  name: 'SupplyCompany',
  components: {
  },
  data() {
    return {
      filterCompany: null,
      supplyCompanyName: null,
      tempcity:[],
      allList: null,
      page: 1,
      size: 20,
      total: 0,
      autoHeight: 600,//根据屏幕高度自动计算的高度
      //筛选参数
      params: {
        flag: 1,
      },
      time:"",
      orgBillModelId:null,
      shareProfitShow:false,
      billModelList:[],
      privacyPhoneValue:false,
      filterLevel: '',
      selectRowList: [],
      onDeleteDialogShow: false,
      onDeleteLoading: false,
      onDeleteShow: false,
      onDeleteId: "",
      //信息窗口
      infoDialogShow: false,
      detail: {
        province:"",
        city:""
      },
      onSaveLoading: false,
      areaData:[],
      listLoading:false
    }
  },
  beforeMount() {
    this.autoHeight = document.body.scrollHeight - 220
  },
  mounted() {
    _this = this
    this.fetchData()
    this.areaData = getCityData()
    //去掉第三级的信息
    for (let i = 0; i < this.areaData.length; i++) {
      if (this.areaData[i].children != null && this.areaData[i].children.length > 0) {
        for (let j = 0; j < this.areaData[i].children.length; j++) {
          this.areaData[i].children[j].children = null
        }
      }
    }
  },
  created() {

  },
  methods: {

    fetchData() {
      this.listLoading = true
      const data = new FormData()
      for (var key in this.params) {//直接去除掉空值的对象
        if (this.isEmpty(this.params[key])) {
          delete this.params[key]
        }
      }

      data.append('params', JSON.stringify(this.params))
      data.append('page', this.page)
      data.append('size', this.size)

      const sortList = []
      sortList.push(
        {
          direction: 'desc',
          property: 'createTime'
        }
      )
      data.append('sortJsonStr', JSON.stringify(sortList))
      request.getList(data).then(response => {
        this.allList = response.data
        this.total = response.totalElements

        this.listLoading = false
      })
    },
    deleteById() {

      //通过id删除
      this.$message({
        message: '操作中',
        type: 'warning',
        duration: 1000
      })
      this.onDeleteLoading = true
      const data = new FormData()
      data.append('ids', [this.onDeleteId])
      request.batchDelete(data).then(response => {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 3000
        })
        this.onDeleteLoading = false
        this.onDeleteShow = false
        _this.fetchData()
      }).catch((e) => {
        this.onDeleteLoading = false
      })

    }, batchDelete() {
      const _this = this
      if (this.selectRowList == null || this.selectRowList.length == 0) {
        this.$message({
          message: '请选择对象',
          type: 'warning',
          duration: 1000
        })
        return
      }
      const array = []
      for (let i = 0; i < this.selectRowList.length; i++) {
        array.push(this.selectRowList[i].id)
      }
      const data = new FormData()
      data.append('ids', array)
      this.$message({
        message: '操作中',
        type: 'warning',
        duration: 1000
      })
      this.onDeleteLoading = true
      request.batchDelete(data).then(response => {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 3000
        })
        this.onDeleteLoading = false
        this.onDeleteDialogShow = false
        _this.fetchData()
      }).catch((e) => {
        this.onDeleteLoading = false
      })
    }
    , handleSizeChange(val) {
      this.size = val
      this.fetchData()
    }, handleCurrentChange(val) {
      this.page = val
      this.fetchData()
    }, handleSelectionChange(rowList) {//多选变化监听
      this.selectRowList = rowList
    }, onCellClick(row, column, cell, event) {
      if (column.type == 'selection') {
        this.$refs.table.toggleRowSelection(row)
      }
    }
    , onItemClick(row) {//单行点击
    }
    , onItemDoubleClick(row) {//单行双击
      this.onClickView(row)
    }
    , onClickAdd() {
      this.detail = {
        province:"",
        city:""
      }
      this.tempcity =[];
      this.infoDialogShow = true
    }, onDialogOpen() {

    }, onClickSave() {//点击保存
      if (this.detail.name == null || this.detail.name === "") {
        this.$message({
          message: '单位名称不能为空',
          type: 'warning',
          duration: 2000
        })
        return
      }
      this.requestSave()
    }, onClickView(row) {

      this.detail = JSON.parse(JSON.stringify(row))
      this.tempcity = [this.detail.province,this.detail.city];
      this.infoDialogShow = true
    }, requestSave() {
      this.onSaveLoading = true
      //把选择的权限赋值过去
      const data = new FormData()
      request.saveByJson(this.detail).then(response => {
        this.onSaveLoading = false
        this.infoDialogShow = false
        this.$message({
          message: '保存成功',
          type: 'success',
          duration: 2000
        })
        this.fetchData()
      }).catch((e) => {
        this.onSaveLoading = false
      })
    },
    onRegionChange(val){
      if (val) {
        this.detail.province = val[0];
        this.detail.city = val[1];
      }

    },
    onCompanyFilterChange(val) {
      if (val) {
        if (val.length == 2){
          this.params.province = val[0];
          this.params.city = val[1];
        } else if (val.length == 1){
          this.params.province = val[0];
          this.params.city = "";
        } else {
          this.params.province = "";
          this.params.city = "";
        }
        // this.params.page=1;
        // this.fetchData();
      } else {
        this.params.province = "";
        this.params.city = "";
        // this.fetchData();
      }

      console.log(val)
      const one = val[0]
      const two = val[1]

      console.log(one, two)
      this.onClickSearch()
    },
    onClickSearch() {//点击搜索
      this.page = 1;
      if (!this.isEmpty(this.searchName)) {
        this.params['name_like'] = ('%' + this.searchName.trim() + '%')
      } else {
        this.params['name_like'] = ''
      }
      if (!this.isEmpty(this.searchType)) {
        this.params['type_like'] = ('%' + this.searchType.trim() + '%')
      } else {
        this.params['type_like'] = ''
      }
      if (!this.isEmpty(this.supplyCompanyName)) {
        this.params['name_like'] = ('%' + this.supplyCompanyName.trim() + '%')
      } else {
        this.params['name_like'] = ''
      }

      this.fetchData()
    },

  }
}
</script>
<style>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 400px;
  height: 300px;
  line-height: 300px;
  text-align: center;
}

/*清除type=number的上下箭头*/
/* 在Chrome浏览器下 */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* 在Firefox浏览器下 */
input[type="number"] {
  -moz-appearance: textfield;
}

.my-number .el-input .el-input__inner {
  text-align: left;
}
</style>
